<template>
	<view class="all-box containers" style="margin-bottom:200rpx;">
		<view v-if="netWorkType!='none'">
			<tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton>
			<view class="container tui-skeleton">
				<view class="tab-time bg-white">
					<view class="flex-box inner marginleft15 marginright15">
						<view @tap="tabDate(item,index)"
							:class="[current==index ? 'item text-center active font-white' : 'item text-center']"
							v-for="(item,index) in dateArr">{{item}}</view>
					</view>
				</view>
				 
				<!-- chart图表 -->
				<view class="week-trend  padbottom15 bg-white padtop5">
					<!-- 月走势 -->
						<view class="flex-box bg-white padleft15 padtop30 padright15">
						<view class="flex-start-box">
							<view class="font16 font-bold">月走势</view>
						</view>
						<view>
							<text class="font12 font-gray2">月均数据</text>
						</view>
					</view>
				<!-- 	<view class="echart-view bg-white">
						<view class="line_chart">
							<canvas :canvasId="canvasId" id="canvasId" disable-scroll="true" :style="{ width: cWidth + 'px', height: cHeight + 'px' }"
							 @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" />
							<slot />
						</view>
					</view>
					  -->
					  <view></view>
					  
					<view class="f2_container ">
						 <canvas  type="2d" class="f2-canvas"   @touchStart="touchStart" @touchMove="touchMove" @touchEnd="touchEnd" />
					
					</view>
					<view class="text-center">
						<text class="circle-icon margin-right5"></text> <text class="font12" font12>高压</text>
						<text class="circle-icon low margin-right5 marginleft15"></text> <text class="font12">低压</text>
					</view>
				</view>
				<!-- <view class="chart-wrapper" v-if="data.dataList.length">
				        <ff-canvas 
				            class="chart"  
				            canvas-id="chart-pub" 
				            :opts="opts"
				            :onInit="initChart">
				        </ff-canvas>
				    </view> -->
			 
				<view class="count-view bg-white">
					<view class="font-bold font16 padleft15 padright15 padbottom15">
						异常数据统计
					</view>
					<view class="flex-box result-data padbottom15">
						<view class="v-item text-center">
							<view>
								<view :class="[data.list.check.sp<140 ? 'font24 green-color' : 'font24 danger-color']">
									{{data.list.health_num || '--'}}</view>
								<view class="font-gray2 font12">血压异常</view>
								<view class="font-gray2 font12">(次)</view>
							</view>


						</view>
						<view class="v-item text-center center">
							<view>
								<view class="font24 green-color">{{data.list.blutdruck}}</view>
								<view class="font-gray2 font12">最高值</view>
								<view class="font-gray2 font12">mmHg</view>
							</view>

						</view>
						<view class="v-item text-center">
							<view>
								<view class="font24 green-color">{{data.list.sphygmus_num || '--'}}</view>
								<view class="font-gray2 font12">脉搏异常</view>
								<view class="font-gray2 font12">（次）</view>
							</view>

						</view>
					</view>
				</view>
				<!-- tip -->
				<view class="font12 font-gray2 padleft15 padright15 bg-white padbottom15 font-bold">
					*该结果仅做参考，不能作为专业临床诊断依据，多次测试异常， 请及时前往医院进行专业诊断
				</view>

			</view>
		</view>
		<!-- 提示弹框 -->
		<tui-tips ref="toast"></tui-tips>
		<!-- 登录弹窗 -->
		<uni-popup-vlogin id="popupvLogin" ref="popupvLogin" type="bottom" />

	</view>
</template>
<script>
	import Vue from 'vue'
	import store from '@/store/index.js';
	// 公共底部
	import btabbar from '@/components/indexBottomTable/bottomtabbar.vue'
	// import uCharts from '@/plugins/stan-ucharts/u-charts/u-charts.js'; //可以优化放全局 uCharts ==>使用全局
	import F2 from '@/js_sdk/uni-f2/f2.min.js'

	function wrapEvent(e) {
	  if (!e) return
	  if (!e.preventDefault) {
	    e.preventDefault = function() {}
	  }
	  return e
	}
	
	import {
		mapGetters
	} from 'vuex';

	const lineCharts = {},
		optionAs = {};
	export default {
		components: {
			btabbar,
			// f2
		},
		computed: {
			cWidth() {
				return uni.upx2px(this.width);
			},
			cHeight() {
				return uni.upx2px(this.height);
			},
			//注册网络状态
			...mapGetters(['netWorkType', 'loginStatus'])
		},
		data() {
			return {
				itemCount: 8,
				width: 750,
				height: 500,
				canvasId: 'canvasMix',
				labelKey: 'label',
				valueKey: 'value',
				//图标
				// 骨架屏
				skeletonShow: true,
				current: 0,
				dateArr: ['7天', '30天', '90天', '1年'],
				fromFather: {
					member_id: '',
				},
				page: {
					currentPage: 1,
					size: 10,
				},
				lineChartData: {

					label: [],
					value: [{
						name: '高压',
						data: []
					}, {
						name: '低压',
						data: []
					}]

				},
				yAxisAs: {
					// disabled:false,
					max: 200,
					formatter: {
						type: 'number', //type:number percent String,额外参数:fixed:NUmber,name:String
						fixed: 0,
						name: ''
					}

				},
				data: {
					list_key: [],
					list: {}
				},
				dataList:[]
				// dataList: [{"date":"10-25","type":"高压","value":100},{"date":"10-25","type":"低压","value":85},{"date":"10-25","type":"脉搏","value":65},{"date":"10-24","type":"高压","value":145},{"date":"10-24","type":"低压","value":85},{"date":"10-24","type":"脉搏","value":75},{"date":"10-23","type":"高压","value":0},{"date":"10-23","type":"低压","value":0},{"date":"10-23","type":"脉搏","value":0},{"date":"10-22","type":"高压","value":128},{"date":"10-22","type":"低压","value":75},{"date":"10-22","type":"脉搏","value":60},{"date":"10-21","type":"高压","value":175},{"date":"10-21","type":"低压","value":105},{"date":"10-21","type":"脉搏","value":85},{"date":"10-20","type":"高压","value":"155"},{"date":"10-20","type":"低压","value":"94"},{"date":"10-20","type":"脉搏","value":"66"},{"date":"10-19","type":"高压","value":165},{"date":"10-19","type":"低压","value":100},{"date":"10-19","type":"脉搏","value":75}],
			}
		},
		onLoad(e) {
			// this.dataList = await this.getData();
			this.fromFather.member_id = e.member_id;
			this.fromFather.product_type = e.product_type;
		      this.getList()
		},
		onShow() {
			this.beforeSevenDay()

		},
	 
		methods: {
			initChart() {
							
				const query = uni.createSelectorQuery().in(this);
				query.select('.f2-canvas')
				  .fields({
				    node: true,
				    size: true
				  })
				  .exec(res => {
				    const { node, width, height } = res[0]; 
				    const context = node.getContext('2d'); 
				    const pixelRatio = wx.getSystemInfoSync().pixelRatio;
				    // 高清设置
				    node.width = width * pixelRatio;
				    node.height = height * pixelRatio; 
					// const appendPadding = [50,15,,15,,15]
				    const config = { context, width, height, pixelRatio };
				 
					// // 实例化chart
					const chart = new F2.Chart(config) 
					chart.legend(false)
					chart.axis('date', {
					  label: {
					    rotate: -Math.PI / -3,
					    textAlign: 'bottom'
					  },
					  
					});
					//数据源
					chart.source(this.dataList);
					chart.scale('value', {
					    ticks: [ 0, 60, 120, 180, 240 ],
					});
					chart.line().position('date*value').color('type'); 
					chart.render();
					 
				    if (chart) {
				      this.chart = chart;
				      this.canvasEl = chart.get('el');
				    }
				  }); 
			},

			 getList() {
				let _this = this
				let opt = {
					url: '/blutdruck_check/getEcharts',
					method: 'get',
					data: {
						member_id: _this.fromFather.member_id,
						type: _this.current + 1,
						product_type: 1,
					},
					success: function(res) {
						// console.log(res)
						if (res.status == 1) {
							_this.dataList = res.data.value;
							_this.initChart()
					 
							_this.skeletonShow = false;
							_this.data.list=res.data;
					 



						} else {

						}

					}
				};
				if (this.loginStatus) {
					this.$service.GetApi(opt) //网络
				}

			},
			tabDate(row, i) {
				this.current = i;
				if (i == 3) {
					this.itemCount = 5;
				} else {
					this.itemCount = 8;
				}
				this.getList()
			},
			beforeSevenDay() {
				let aa = [0, -1, -2, -3, -4, -5, -6];
				var date1 = new Date(),
					time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate(); //time1表示当前时间
				var date2 = new Date(date1);
				let time2 = []
				time2 = aa.map(function(row) {
					date2.setDate(date1.getDate() + row);
					// date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate();
					return (date2.getMonth() + 1) + "/" + date2.getDate();
				})
				this.lineChartData.label = time2;




			},
		 
			touchStart(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchstart', wrapEvent(e))
			},
			touchMove(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchmove', wrapEvent(e))
			},
			touchEnd(e) {
			  const canvasEl = this.canvasEl
			  if (!canvasEl) {
			    return
			  }
			  canvasEl.dispatchEvent('touchend', wrapEvent(e))
			}
			//


		}
	}
</script>

<style lang="scss">
	@import "./data_list.scss";
</style>
